<template>
  <div id="components-layout-top">
    <v-layout class="layout">
      <v-header>
        <div class="logo"></div>
        <!-- <v-menu
          theme="dark"
          mode="horizontal"
          :data="menuData1"
          :style="{ lineHeight: '64px' }"
        ></v-menu> -->
      </v-header>
      <v-content
        :style="{
          padding: '0 50px',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }"
      >
        <v-breadcrumb :style="{ margin: '24px 0' }">
          <!-- <v-breadcrumb-item>Home</v-breadcrumb-item>
          <v-breadcrumb-item href="">List</v-breadcrumb-item>
          <v-breadcrumb-item href="">App</v-breadcrumb-item> -->
        </v-breadcrumb>

        <div
          id="main-content"
          style="
            background: #fff;
            padding: 24px;
            width: 600px;
            min-height: 280px;
          "
        >
          <router-view></router-view>
        </div>
      </v-content>
    </v-layout>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
#components-layout-top {
  height: 100vh;
  min-height: 100vh;
  .ant-layout {
    height: 100%;
    min-height: 100%;
  }

  .logo {
    width: 120px;
    height: 31px;
    background: #333;
    border-radius: 6px;
    margin: 16px 24px 16px 0;
    float: left;
  }

  #main-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}
</style>
